<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">
<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>监测主机管理</h2>
                <ol class="breadcrumb">
                    <li>
                        消防动态监测系统
                    </li>
                    <li class="active">
                        监测主机管理
                    </li>
                </ol>
            </div>
        </div>
        <div class="wrapper wrapper-content">

            <div class="">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-desktop"></i></a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-cog"></i></a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="tab-1" class="tab-pane active">
                            <div class="panel-body">
                                <div >
                                    <button <#if (role_type_id > 1)>disabled</#if> type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-primary" data-toggle="modal" data-target="#addModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加监测主机</button>
                                </div>
                                <div class="modal inmodal" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content animated bounceInUp">
                                            <div class="modal-header">
                                                <i class="fa fa-desktop modal-icon"></i>
                                                <h4 class="modal-title">添加监测主机</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal">
                                                    <div class="form-group"><label class="col-lg-2 control-label">IP</label>
                                                        <div class="col-lg-10"><input id="hostIP" type="text"  class="form-control" required></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">名称</label>
                                                        <div class="col-lg-10"><input id="hostNAME" type="text"  class="form-control" required></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">描述</label>
                                                        <div class="col-lg-10"><input id="hostDETAIL" type="text"  class="form-control"></div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button id="hostCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                <button id="hostSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <table class="table table-striped table-bordered table-hover " id="editable" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>名称</th>
                                        <th>IP</th>
                                        <th>描述</th>
                                        <th>最后通讯时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

                                <div class="modal inmodal" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content animated bounceInRight">
                                            <div class="modal-header">
                                                <i class="fa fa-desktop modal-icon"></i>
                                                <h4 class="modal-title">修改动态监测主机</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form id="updateForm" enctype="multipart/form-data"  class="form-horizontal" >
                                                    <div class="form-group" style="display: none"><label class="col-lg-2 control-label">ID</label>
                                                        <div class="col-lg-10"><input id="hostID" name="id" type="text"  class="form-control"></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">IP</label>
                                                        <div class="col-lg-10"><input id="hostUpdateIP" name="ip" type="text"  class="form-control"></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">名称</label>
                                                        <div class="col-lg-10"><input id="hostUpdateNAME" name="name" type="text"  class="form-control"></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">描述</label>
                                                        <div class="col-lg-10"><input id="hostUpdateDETAIL" name="detail" type="text"  class="form-control"></div>
                                                    </div>
                                                    <button id="updateSubmit" type="submit" style="display: none"></button>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button id="hostUpdateCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                <button id="hostUpdateSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="tab-2" class="tab-pane">
                            <div class="panel-body">
                               <div class="col-md-12">
                                   <button id="refreshSensor" type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-info"><i class="fa fa-refresh"></i>&nbsp;&nbsp;刷新状态</button>
                                   <button id="addSensor" <#if (role_type_id > 1)>disabled</#if> type="button" style="margin-bottom: 10px;" class="btn btn-outline btn-primary" data-toggle="modal" data-target="#addSensorModal" ><i class="fa fa-plus"></i>&nbsp;&nbsp;添加传感器</button>
                               </div>
                               <div class="col-md-12">
                                   <table class="table table-striped table-bordered table-hover " id="sensorTable" cellspacing="0" width="100%">
                                       <thead>
                                       <tr>
                                           <th>传感器编码</th>
                                           <th>传感器描述</th>
                                           <th>地理位置</th>
                                           <th>主机名称</th>
                                           <th>主机IP</th>
                                           <th>最后通讯时间</th>
                                           <th>操作</th>
                                       </tr>
                                       </thead>
                                       <tbody>

                                       </tbody>
                                   </table>
                               </div>
                                <div class="modal inmodal" id="addSensorModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content animated bounceInUp">
                                            <div class="modal-header">
                                                <i class="fa fa-cog modal-icon"></i>
                                                <h4 class="modal-title">添加传感器</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form id="sensorForm" class="form-horizontal">
                                                    <div class="form-group"><label class="col-lg-2 control-label">监测主机</label>
                                                        <div class="col-lg-10"><select id="deviceSelect"  class="form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">编号</label>
                                                        <div class="col-lg-10"><input id="sensorCode" type="text"  class="form-control" required></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">描述</label>
                                                        <div class="col-lg-10"><input id="sensorDETAIL" type="text"  class="form-control"></div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button id="sensorCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                <button id="sensorSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal inmodal" id="editSeneorModal" tabindex="-1" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content animated bounceInDown">
                                            <div class="modal-header">
                                                <i class="fa fa-cog modal-icon"></i>
                                                <h4 class="modal-title">编辑传感器</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form id="sensorForm" class="form-horizontal">
                                                    <div class="form-group"><label class="col-lg-2 control-label">编号</label>
                                                        <div class="col-lg-10"><input id="sensorCode" type="text"  class="form-control" required></div>
                                                    </div>
                                                    <div class="form-group"><label class="col-lg-2 control-label">描述</label>
                                                        <div class="col-lg-10"><input id="sensorDETAIL" type="text"  class="form-control"></div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button id="sensorEditCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-mail-reply"></i>&nbsp;&nbsp;取消</button>
                                                <button id="sensorEditSave" type="button" class="btn btn-primary"><i class="fa fa-check"></i>&nbsp;&nbsp;保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>


        </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>

    var server = getURL() + "${baseURL}";

    var dTable = $('#editable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/dt_device/getAll",
        columns:[
            {"data":"id"},
            {"data":"name"},
            {"data":"ip"},
            {"data":"detail"},
            {"data":"last_time","render": function ( data, type, row, meta ) {
                if(data === 0) return "无数据";
                else return showTime(data);
            }},
            {"data":null,"render": function ( data, type, row, meta ) {
                var obj = encodeURIComponent(JSON.stringify(row));
                return   '<div  class="col-sm-12" style="padding: 0 0 0 0;"><div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> data-toggle="modal" data-target="#updateModal" onclick='+"editBtn("+'"'+obj+'"'+")"+ ' type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;编&nbsp;辑</button></div> <div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> onclick="deleteBtn('+row.id+')" type="button" class="btn btn-block btn-warning" style="padding: 0 0 0 0;"><i class="fa fa-trash"></i>&nbsp;&nbsp;删&nbsp;除</button></div></div>'
            },"width":"15%",targets:6}
        ],
        aoColumnDefs: [ { "bSortable": false, "aTargets": [ 5 ] }],
        destroy: true
    });

    var sTable = $('#sensorTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/dt_sensor/getAll",
        columns:[
            {"data":"code"},
            {"data":"detail"},
            {"data":"geo_name"},
            {"data":"device_name"},
            {"data":"device_ip"},
            {"data":"device_last_time","render": function ( data, type, row, meta ) {
                if(data === 0) return "无数据";
                else return showTime(data);
            }},
            {"data":"id","render": function ( data, type, row, meta ) {
                return   '<div  class="col-sm-12" style="padding: 0 0 0 0;"><div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> data-toggle="modal" data-target="#editSeneorModal" type="button" class="btn btn-block btn-success" style="padding: 0 0 0 0;"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;编&nbsp;辑</button></div> <div class="col-sm-6" style="padding: 0 2px 0 0;"><button <#if (role_type_id > 1)>disabled</#if> onclick="deleteSensorBtn('+data+')" type="button" class="btn btn-block btn-warning" style="padding: 0 0 0 0;"><i class="fa fa-trash"></i>&nbsp;&nbsp;删&nbsp;除</button></div></div>'
            }}
        ],
        aoColumnDefs: [ { "bSortable": false, "aTargets": [ 6 ] }],
        destroy: true
    });

    function deleteSensorBtn(id){
        console.log("delete: " + id);
    }

    function editBtn(obj){
        var data = JSON.parse(decodeURIComponent(obj));
        $("#hostID").val(data.id);
        $("#hostUpdateIP").val(data.ip);
        $("#hostUpdateNAME").val(data.name);
        $("#hostUpdateDETAIL").val(data.detail);
    };

    $("#hostUpdateSave").click(function(){
        var form = new FormData(document.forms.namedItem("updateForm"));
        $.ajax({
            url: "${baseURL}/water/dt_device/update",
            contentType: false,
            cache: false,
            processData: false,
            type: 'POST',
            dataType: 'json',
            data: form,
            success:function(data){
                if(data.code === 0) {
                    swal({
                        title: "操作成功",
                        type: "success"
                    }, function () {
                        location.reload();
                    });
                }
            },
            error:function(error) {
                swal({
                    title: "提交失败，请检查输入的内容。",
                    type: "error"
                })
            }
        });

    });

    function deleteBtn(id){
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_device/delete?id=" + id,
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "删除成功。",
                        type: "success"
                    });
                    dTable.ajax.reload();
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "操作失败。",
                    type: "error"
                })
            }
        });
    }

    $("#hostSave").click(function(){
        var ip = $("#hostIP").val();
        var name = $("#hostNAME").val();
        var detail = $("#hostDETAIL").val();
        console.log({"name":name, "ip":ip,"detail":detail});
        $.ajax({
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_device/add",
            data: JSON.stringify({"name":name, "ip":ip,"detail":detail}),
            success:function(data){
                if(data.code === 0){
                    swal({
                        title: "操作成功",
                        type: "success"
                    },function(){
                        $("#hostCANCEL").click();
                        dTable.ajax.reload();
                    });
                }
                else{
                    swal({
                        title: data.data,
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "提交失败，请检查输入的内容。",
                    type: "error"
                })
            }
        });

    });

    $("#addSensor").click(function(){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_device/getAll2",
            async:false,
            success: function (data) {
                if(data.code === 0){
                    $("#deviceSelect").select2({
                        dropdownParent: $('#sensorForm'),
                        language: {
                            "noResults": function () {
                                return "没有数据";
                            }
                        },
                        allowClear:false,
                        placeholder: "请选择监测主机",
                        data:data.data
                    });
                }
            }
        });
    });

    $("#sensorSave").click(function(){
        var device_id = $("#deviceSelect").find("option:selected").val();
        var code = $("#sensorCode").val();
        var detail = $("#sensorDETAIL").val();
        $.ajax({
            type:"POST",
            contentType:"application/json",
            dataType:"json",
            url:"${baseURL}/water/dt_sensor/add",
            data:JSON.stringify({"device_id":device_id,"code":code,"detail":detail}),
            success:function(data){
                console.log(data)
                if(data.code === 0){
                    swal({
                        title: "添加成功。",
                        type: "success"
                    },function(isConfirm){
                        if(isConfirm) location.reload();
                    });
                }
                else{
                    swal({
                        title: "添加失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "请求失败。",
                    type: "error"
                })
            }
        });
    });

    function showTime(unix_time) {
        var date = new Date(unix_time * 1000);
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1).toString();
        if(month.length < 2) month = '0' + month;
        var day = date.getDate().toString();
        if(day.length < 2) day = '0' + day;
        var h = date.getHours().toString();
        if(h.length < 2) h = '0'+ h;
        var m = date.getMinutes().toString();
        if(m.length < 2) m = '0'+ m;
        var s = date.getSeconds().toString();
        if(s.length < 2) s = '0'+ s;
        return year + '-' + month + '-' + day + ' ' + h + ":" + m +":" + s;
    }

</script>
</body>
</html>